<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人中心</title>
    <style>
		* {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        .profile-container {
            max-width: 800px;
            margin: 20px auto;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            position: relative;
        }

        .profile-header {
            text-align: center;
            padding: 30px 20px;
            background: #6e8efb;
            color: white;
        }
        .avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 3px solid white;
            object-fit: cover;
        }


        .profile-content {
            padding: 20px;
        }


        h2 {
            color: #6e8efb;
            margin-bottom: 15px;
        }

        .info-item {
            margin-bottom: 10px;
            display: flex;
        }

        .info-label {
            font-weight: bold;
            width: 80px;
        }

        .info-value {
            flex: 1;
        }

        .nav {
            width: 100%;
            height: 50px;
            background-color: gray;
            display: flex;
            justify-content: left;
            align-items: center;
            color: white;
        }

        .nav .sp {
            width: 70%;
        }

        .nav img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-left: 8px;
            margin-right: 8px;
            margin-top: 6px;
        }

        .nav a {
            color: white;
            text-decoration: none;
            margin-left: 10px;
            margin-right: 30px;
        }
	</style>
</head>

<body>
    <div class="nav">
        <img src="./img/kko.jpg" alt="">
        <span>个人博客</span>
        <span class="sp"></span> <!-- 占位符 -->
        <a href="主页.html">主页</a>
        <a href="个人中心.html">个人中心</a>
        <a href="登录.html">退出登录</a>
    </div>
    <div class="profile-container">
        <!-- 头部区域 -->
        <header class="profile-header">
            <img src="./img/kko.jpg" alt="用户头像" class="avatar">
            <h1 class="username">方建平</h1>
        </header>

        <!-- 主要内容区域 -->
        <div class="profile-content">
            <!-- 个人信息部分 -->
            <div class="info-section">
                <h2>个人信息</h2>
                <div class="info-item">
                    <span class="info-label">姓名：</span>
                    <span class="info-value">方建平</span>
                </div>
                <div class="info-item">
                    <span class="info-label">性别：</span>
                    <span class="info-value">男</span>
                </div>
                <div class="info-item">
                    <span class="info-label">年龄：</span>
                    <span class="info-value">20</span>
                </div>
                <div class="info-item">
                    <span class="info-label">邮箱：</span>
                    <span class="info-value">2960783776@qq.com</span>
                </div>
                <div class="info-item">
                    <span class="info-label">手机：</span>
                    <span class="info-value">18777432173</span>
                </div>
            </div>

            <!-- 个人简介部分 -->
                <h2>个人简介</h2>
                <p>
                    我是一名热爱前端开发的技术人员，擅长HTML、CSS。
                    喜欢学习新技术，乐于分享知识。业余时间喜欢阅读和旅行。
                </p>
            </div>
        </div>
    </div>
</body>

</html>